<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-form :inline="true" class="demo-form-inline" :disabled="disabled">
      <el-form-item label="一级分类">
        <!-- 一级选框的值发生变化时,二级选框的选项也随之发生变化 -->
        <el-select 
        placeholder="请选择"
        v-model="(category1Id as number)"
        @change="category1Change"
        >
        <!-- 
          选择不同的选项.id有不同的变化,
          select进行了双向数据绑定,其保存的id是动态的
          当提交表单时,选项的value值保存的id会随着一起提交,
          select保存的id与选项上的value进行比对
          将对应value的值渲染在视图中
         -->
          <el-option 
          v-for="item in categoryList1"
          :label="item.name" 
          :value="item.id" 
          :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select 
        placeholder="请选择"
        v-model="(category2Id as number)"
        @change="category2Change"
        >
        <!-- 
          选择不同的选项.id有不同的变化,
          select进行了双向数据绑定,其保存的id是动态的
          当提交表单时,选项的value值保存的id会随着一起提交,
          select保存的id与选项上的value进行比对
          将对应value的值渲染在视图中
         -->
          <el-option 
          v-for="item in categoryList2"
          :label="item.name" 
          :value="item.id" 
          :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select 
        placeholder="请选择"
        v-model="(category3Id as number)"
        >
        <!-- 
          选择不同的选项.id有不同的变化,
          select进行了双向数据绑定,其保存的id是动态的
          当提交表单时,选项的value值保存的id会随着一起提交,
          select保存的id与选项上的value进行比对
          将对应value的值渲染在视图中
         -->
          <el-option 
          v-for="item in categoryList3"
          :label="item.name" 
          :value="item.id" 
          :key="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- card body -->
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Category",
});
</script>

<script setup lang="ts">
import useAttrListStore from "@/stores/attr"
import { storeToRefs } from "pinia";
import { onMounted } from "vue"

defineProps<{
  disabled: boolean
}>()
//获取attr小仓库中的数据
const attrStore = useAttrListStore()

//解构小仓库,storeToRefs结构出来的是ref对象
const {
  categoryList1,
  categoryList2,
  categoryList3,
  category1Id,
  category2Id,
  category3Id,
} = storeToRefs(attrStore)

//初始化操作请求分类1
onMounted(() => {
  attrStore.getCategory1()
})

//一级分类选择后处理二级分类
const category1Change = () => {
  //先清空二三级的所有数据
  categoryList2.value = [],
  categoryList3.value = [],
  category2Id.value = null,
  category3Id.value = null,
  //发送二级分类请求
  attrStore.getCategory2()
}

//二级分类选择后处理三级分类
const category2Change = () => {
  //先清空二三级的所有数据
  categoryList3.value = [],
  category3Id.value = null,
  //发送二级分类请求
  attrStore.getCategory3()
}

</script>